<template>
	<view class="form-container" ref="form-container">

		<!-- 1张牌的1阵型 -->
		<view class="form form-1-1" v-if="type === 1000">
			<view class="poker" :style="{'width': pokerW + 'px', 'height': pokerH + 'px'}"></view>
		</view>
		
		<!-- 3张牌的1阵型 -->
		<view class="form form-3-1" v-else-if="type === 1001 || type === 2001 || type === 5001">
			<view class="poker" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'margin-right': pokerMargin + 'px'}">1</view>
			<view class="poker" :style="{'width': pokerW + 'px', 'height': pokerH + 'px'}">2</view>
			<view class="poker" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'margin-left': pokerMargin + 'px'}">3</view>
		</view>
		
		<!-- 3张牌的2阵型 -->
		<view class="form form-3-2" v-else-if="type === 1002 || type === 2002">
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '9%', 'left': `calc(50% - ${pokerW / 2}px);`}">1</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '14%', 'left': '20%'}">2</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '14%', 'right': '20%'}">3</view>
		</view>
		
		<!-- 4张牌的1阵型 -->
		<view class="form form-4-1" v-else-if="type === 1003 || type === 2003">
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '18%', 'left': `calc(50% - ${pokerW / 2}px);`}">1</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '18%', 'left': '13%'}">2</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '18%', 'right': '13%'}">3</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '5%', 'left': `calc(50% - ${pokerW / 2}px);`}">4</view>
		</view>
		
		<!-- 6张牌的1阵型 -->
		<view class="form form-6-1" v-else-if="type === 3001">
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '11%', 'left': '15%'}">1</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '15%', 'left': '15%'}">2</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '11%', 'left': `calc(50% - ${pokerW / 2}px);`}">3</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '15%', 'left': `calc(50% - ${pokerW / 2}px);`}">4</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '11%', 'right': '15%'}">5</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '15%', 'right': '15%'}">6</view>
		</view>
		
		<!-- 5张牌的1阵型 -->
		<view class="form form-5-1 form-3-1" v-else-if="type === 4001">
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '10%', 'left': `calc(50% - ${pokerW / 2}px);`}">1</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '35%', 'left': '27%'}">2</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'bottom': '35%', 'right': '27%'}">3</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '15%', 'left': '15%'}">4</view>
			<view class="poker poker-absolute" :style="{'width': pokerW + 'px', 'height': pokerH + 'px', 'top': '15%', 'right': '15%'}">5</view>
		</view>
		
		<!-- 其他 -->
		<view class="form" v-else></view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1000
			}
		},
		data() {
			return {
				formW: 0,
				pokerScaleH2W: 1.7,
				pokerW: 0,
				pokerH: 0,
				pokerMargin: 0,
			}
		},
		created() {
		},
		mounted() {
			// 获取自身宽高
			uni.createSelectorQuery().in(this).select('.form-container').boundingClientRect((rect) => {
				// console.log('宽度:', rect.width);
				// console.log('高度:', rect.height);
				// 规定为正方形
				this.formW = rect.width;
				// 根据type处理阵型
				this.handleFormWithType(this.type);
			}).exec();
		},
		methods: {
			handleFormWithType(type) {
				this.pokerMargin = this.formW / 20;
				switch (type){
					case 1001:
					case 2001:
					case 5001:
						this.pokerW = (this.formW - this.pokerMargin * (3 + 1)) / 3 - 8; // （总宽 - 外边距 * (每行卡牌数量 + 1)）/ 每行卡牌数量 - 调整值
						break;
						
					case 1002:
					case 2002:
						this.pokerW = (this.formW - this.pokerMargin * (3 + 1)) / 3 - 10;
						break;
						
					case 1003:
					case 2003:
						this.pokerW = (this.formW - this.pokerMargin * (3 + 1)) / 3 - 10;
						break;
						
					case 3001:
						this.pokerW = (this.formW - this.pokerMargin * (3 + 1)) / 3 - 14;
						break;
						
					case 4001:
						this.pokerW = (this.formW - this.pokerMargin * (5 + 1)) / 5 - 2;
						break;
						
					default:
						this.pokerW = (this.formW - this.pokerMargin * (3 + 1)) / 3;
						break;
				}
				this.pokerH = this.pokerW * this.pokerScaleH2W;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-container {
		width: 100%;
		height: 100%;
		background-color: #20254c;;
	}
	.form {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		// border: 6rpx dashed #fff;
	}
	.form-1-1,
	.form-3-1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.form-3-2,
	.form-4-1,
	.form-6-1,
	.form-5-1 {
		position: relative;
	}
	.poker {
	    display: flex;
	    align-items: flex-end;
	    justify-content: center;	
		width: 100rpx;
		height: 170rpx;
		background-image: url('@/static/images/poker-back.jpeg');
		background-size: 100% 100%;
		color: #fff;
		border-radius: 4rpx;
		border: 1px solid gold;
	}
	.poker-absolute {
		position: absolute;
	}
</style>